<template>
	<view style="height: 100%;overflow: auto;">
		<view class="page__content">

			<!-- <up-navbar :fixed="false" title="看板" :autoBack="false" leftIcon=" " :safeAreaInsetTop="true">
			</up-navbar> -->
			<view class="page__content__main">

				<!-- 快捷菜单 -->
				<view class="commonBox">
					<view class="commonBox-title">
						<view class="commonBox-title-left">
							<text>快捷发起</text>
						</view>
						<view class="commonBox-title-right">
							<uni-icons fontFamily="CustomFontPlatform" :size="18" color="#51d0d0"
								@click="showPopUp()">{{'\ue657'}}</uni-icons>
						</view>
					</view>
					<view class="commonBox-content">
						<swiper :indicator-dots="true" class="swiper" :current="swiperIndex" @change="onSwiperChange">
							<swiper-item v-for="(page,index) in Math.ceil(shortcuts.length/8)" :key="index">
								<u-grid col="4">
									<u-grid-item
										:customStyle="{paddingTop:'10px',borderRadius:'5px',background:'linear-gradient(to bottom right, #F6F6F6, #FFFFFF)'}"
										v-for="(menu, menuIndex) in shortcuts.filter((item,index)=>index<(8*page) && index>=(page-1)*8)"
										:index="menuIndex" :key="menuIndex" @click="checkOutMenu(menu)">
										<uni-icons v-if="menu.CustomFont && menu.PIC_PH" :fontFamily="menu.CustomFont"
											:size="22"
											:color="menu.AP_Colour">{{ uni.$utils.toUniCode(menu.PIC_PH) }}</uni-icons>
										<uni-icons v-else fontFamily="CustomFontPlatform" :size="22"
											color="#3ace4b">{{ uni.$utils.toUniCode('&#xe62c;') }}</uni-icons>
										<text class="grid-text">{{ getAbbrev(menu.APFunName,7)	}}</text>
									</u-grid-item>
								</u-grid>
							</swiper-item>
						</swiper>
					</view>
				</view>



				<!-- 时间选择器 -->
				<view class="example-body x-bc">
					<m-dropdown-menu :options="pageConfig.SearchCheckList" v-model="pageConfig.CheckedSearchData"
						KeyID="value" marginTop="10" :zIndex="pageConfig.PickerIndex == 1 ? 999999 : 1"
						@selectItem="onChoiceCell">
						<template #default="{element}">
							<view class="x-f MenuText" :style="{color: element ? '#1251e2' : '#333'}">
								<text>{{pageConfig.CheckedSearchData['text']}}</text>

								<up-icon :name="element ? 'arrow-up-fill':'arrow-down-fill'"
									:color="element ? '#1251e2' : '#333'" size="14" style="margin-left: 4px;"></up-icon>
							</view>
						</template>
					</m-dropdown-menu>

					<uni-datetime-picker v-model="pageConfig.singleTimes" @maskClick="pageConfig.PickerIndex = 1"
						@show="pageConfig.PickerIndex = 99999999999" :style="{'z-index':pageConfig.PickerIndex}"
						@change="onChangeDate" type="daterange" :end="pageConfig.EndDate"
						rangeSeparator="至"></uni-datetime-picker>
				</view>



				<view class="x-bc">
					<view class="ItemCard" v-for="item in ModleList" :key="item.id" @click="openPermissionDialog">

						<u-icon size="50rpx" :name="item.Icon"></u-icon>

						<text style="margin-top: 16rpx;font-size: 34rpx;font-weight: 600;">{{item.ShowText}}</text>

						<text style="margin-top: 16rpx;font-size: 20rpx;color: #999;">{{item.Text}}</text>
					</view>
				</view>


				<!-- 消息滚动 -->
				<view @click="openBroadcastPopup">
					<m-carousel-roll :list="RollList" emptyText="暂无播报"
						style="border-radius: 12px;margin-top: 24rpx;padding-left: 18rpx;"
						:title-item-style="{'font-size':'32rpx'}">
						<template v-slot:customLeft>
							<view class="my-custom-text-style x-f"
								style="background-color: #fff3f5;border-radius: 10px;justify-content: center;padding: 4px;">
								<u-icon name="volume-fill" color="#ff8e62" size="34rpx"></u-icon>
							</view>
						</template>
					</m-carousel-roll>
				</view>


				<!-- 完成数量统计 -->
				<view class="CommonCardBox">
					<view class="CommonCard_TopBox">
						<u-cell title="完成数量统计" :border="false"
							:titleStyle="{'font-size':'30rpx','letter-spacing':'2rpx'}">
							<view slot="icon">
								<view class="CommonCard_TitleLeftIcon FinishIconBac">
									<u-icon size="32rpx"
										:name="uni.$utils.getResourceUrl('assets/image/icon/FinishNum.png')"></u-icon>
								</view>
							</view>
						</u-cell>
					</view>

					<view class="CommonCard_Main">

						<view class="LineBox" v-for="(item,index) in FisishData" :key="index">
							<view class="x-f TextBox">
								<view class="Line_Left" style="flex: 1;">
									<text>{{item.ProductName}}</text>
								</view>

								<view class="Line_Right">
									<text>{{item.WCQty}}</text>
								</view>
							</view>

							<view style="padding-bottom: 30rpx;border-bottom: 2px solid #f7f7f7;">
								<u-line-progress :percentage="(item.WCQty / item.FPlanQty)"
									activeColor="#3ed27e"></u-line-progress>
							</view>
						</view>

						<u-empty v-if="!FisishData.length" mode="data" text="暂无数据"
							:icon="uni.$utils.getResourceUrl('image/Img/history.png')" width="40vw" height="40vw"
							textSize="28rpx">
						</u-empty>
					</view>
				</view>


				<!-- 工序执行进度 -->
				<view class="CommonCardBox">
					<view class="CommonCard_TopBox">
						<u-cell title="工序执行进度" :border="false"
							:titleStyle="{'font-size':'30rpx','letter-spacing':'2rpx'}">
							<view slot="icon">
								<view class="CommonCard_TitleLeftIcon GXIconBac">

									<u-icon size="32rpx"
										:icon="uni.$utils.getResourceUrl('assets/image/icon/GXZXJD.png')"></u-icon>
								</view>
							</view>
						</u-cell>
					</view>

					<view class="CommonCard_Main">

						<view class="charts-box">
							<qiun-data-charts type="mix" :opts="opts" :ontouch="true" onzoom :chartData="chartData">

							</qiun-data-charts>
						</view>
					</view>
				</view>


				<!-- 员工报工排行 -->
				<view class="CommonCardBox">
					<view class="CommonCard_TopBox">
						<u-cell title="员工报工排行" :border="false"
							:titleStyle="{'font-size':'30rpx','letter-spacing':'2rpx'}">
							<view slot="icon">
								<view class="CommonCard_TitleLeftIcon YGBGPHIconBack">
									<u-icon size="32rpx"
										:name="uni.$utils.getResourceUrl('assets/image/icon/YGBGPH.png')"></u-icon>
								</view>
							</view>
						</u-cell>
					</view>

					<view class="CommonCard_Main">

						<view style="padding: 10rpx 20rpx;">
							<u-cell>
								<template #title>
									<text style="color: #999;">排名</text>
								</template>
								<template #value>
									<text style="color: #999;">数量</text>
								</template>
							</u-cell>


							<u-cell BottomColor="#f3f3f3" v-for="(item,index) in rankingData" :key="item.FProcessMan">

								<template #title>
									<view class="x-f">
										<u-icon v-if="index <= 2" size="52rpx"
											:name="FormateBackFun('rank',index)"></u-icon>
										<view v-else
											style="font-size: 36rpx;width: 52rpx;text-align: center;color: #17d56b;">
											{{index + 1}}
										</view>
										<text
											style="color: #333;font-size: 28rpx;margin-left: 24rpx;">{{item.EmplName}}</text>
									</view>
								</template>


								<template #value>
									<text style="color: #ffb803;font-size:  28rpx;">{{item.FSumQty}}</text>
								</template>
							</u-cell>
						</view>

						<u-empty v-if="!rankingData.length" mode="data" text="暂无数据"
							:icon="uni.$utils.getResourceUrl('image/Img/history.png')" width="40vw" height="40vw"
							textSize="28rpx">
						</u-empty>
					</view>
				</view>

			</view>
		</view>

		<!-- 实时播报 -->
		<u-popup :show="BroadcastPopup" mode="bottom" :round="12" zIndex="9999999" @close="closeBroadcastPopup">
			<view class="popup__content" style="height: 80vh;">
				<u-navbar :fixed="false" title="实时播报" :autoBack="false" leftIcon=" " :safeAreaInsetTop="false"
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closeBroadcastPopup"></uni-icons>
					</view>
				</u-navbar>

				<view class="popup__content__main" v-if="BroadcastPopup">

					<m-step :options="RollList">
						<template #CardBox="{ element, index }">
							<!-- 在这里定义 CardBox 的内容 -->
							<view style="padding: 30rpx 20rpx;min-height: 100px;">
								<view class="x-f"
									style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
									<text style="font-size: 32rpx;color: #333;">{{element.EmplName}}</text>
									<text
										style="font-size: 32rpx;color: #333;margin-left: 6rpx;">{{element.ProcedureName}}</text>
								</view>

								<view>
									<m-field valueFontSize="26rpx" labelFontSize="26rpx" paddings="4px 0"
										:borderBottom="false" label="工单号:" :value="element.BGBillNO" valueColor="#999">
									</m-field>

									<m-field valueFontSize="26rpx" labelFontSize="26rpx" paddings="4px 0"
										:borderBottom="false" label="产品信息:" :value="element.ProductName"
										valueColor="#999"></m-field>

									<view class="x-f">
										<m-field valueFontSize="26rpx" labelFontSize="26rpx" paddings="4px 0"
											:borderBottom="false" label="良品数量:" :value="element.FDailyQtt"
											valueColor="#2ea77e"></m-field>

										<view style="margin: 0 4rpx;color: #999;font-size: 26rpx;">/</view>

										<m-field valueFontSize="26rpx" labelFontSize="26rpx" paddings="4px 0"
											:borderBottom="false" label="不良品数量:" :value="element.FNgQty"
											valueColor="#d54844"></m-field>

									</view>

								</view>
							</view>
						</template>
					</m-step>

					<u-empty v-if="!RollList.length" mode="data" text="暂无数据"
						:icon="uni.$utils.getResourceUrl('image/Img/history.png')" width="40vw" height="40vw"
						textSize="28rpx">
					</u-empty>

				</view>
			</view>
		</u-popup>

	</view>
</template>

<script setup lang="ts" name="kanban-ticket">
	import { reactive, computed, onMounted, onUnmounted, ref, nextTick, getCurrentInstance } from 'vue'
	import { onLoad, onReady, onShow, onUnload } from "@dcloudio/uni-app";
	import useRequestQueue from '@/uni_modules/mc-ui/libs/http/UniversalRequestQueue';
	const { request, requestByUrl, onAllComplete, onError } = useRequestQueue();

	import { useMainStore, useInventoryStore, useUserStore, usePermissionStore, useTicketStore } from '@/store';
	const ticketStore = useTicketStore();
	const inventoryStore = useInventoryStore();
	const mainStore = useMainStore();
	const userStore = useUserStore();
	const permissionStore = usePermissionStore();


	// 快捷菜单

	// 当前看板ID
	let currBoardID = 14;
	// 定义持久化参数名
	const cacheKey = 'shortcuts_' + currBoardID;
	// 已配置全部快捷菜单(默认+自定义)
	let shortcuts = ref<any>([]);
	let module = ref<any>({})

	const swiperIndex = ref(0);

	const currModuleID = 2;
	// 快捷菜单初始化
	const initShortcut = () => {
		const modules = mainStore.appConfigInfo.APPModules;
		const _module = modules.find((m : any) => m.ModuleID == currModuleID);
		if (!_module) {
			console.warn('未找到匹配的模块，currModuleID:', currModuleID);
			shortcuts.value = [];
			return;
		}
		module.value = _module;

		const cacheStr = uni.getStorageSync(cacheKey);
		// 默认快捷菜单
		const defaultShortcuts = module.value.shortcuts?.filter((item : any) => item.IsShortcut && item.KanBanID == currBoardID) || [];

		let _shortcuts = [];
		if (cacheStr) {
			try {
				const cachedShortcuts = JSON.parse(cacheStr);
				const nonDefaultShortcuts = compareMenus(cachedShortcuts, module.value.authPages || []);
				_shortcuts = [...defaultShortcuts, ...nonDefaultShortcuts];
			} catch (err) {
				console.error('快捷菜单缓存解析失败:', err);
				_shortcuts = defaultShortcuts;
			}
		} else {
			_shortcuts = defaultShortcuts;
		}
		shortcuts.value = _shortcuts;
		// 修正 swiperIndex 溢出
		const maxIndex = Math.ceil(shortcuts.value.length / 8) - 1;
		if (swiperIndex.value > maxIndex) {
			swiperIndex.value = maxIndex;
		}
		persistShortcut(shortcuts.value);
	};
	// 持久化快捷菜单
	const persistShortcut = (shortcuts : any) => {
		uni.setStorageSync(cacheKey, JSON.stringify(shortcuts))
	};
	// 比较缓存非默认快捷菜单并返回
	const compareMenus = (oldMenu : any, newMenu : any) => {
		let _menus = oldMenu.filter((item : any) => {
			// 当前看板非默认菜单和其他看板所有菜单
			if ((item.KanBanID == currBoardID && !item.IsShortcut) || (item.KanBanID != currBoardID)) {
				return item;
			}
		})
		_menus.forEach((item : any, index : number) => {
			let flag = newMenu.some((m : any) => m.APPFunID == item.APPFunID);
			if (!flag) {
				_menus.splice(index, 1);
			}
		});

		return _menus;
	};

	// 数据映射
	// 菜单字数截取(菜单名称,截取字数)
	const getAbbrev = (menuName : any, num : any) => {
		let result = '';
		if (menuName.length > num) {
			result = menuName.substring(0, num);
		} else {
			result = menuName;
		}
		return result;
	};
	// 事件触发
	// 跳转当前菜单页面
	const checkOutMenu = (menu : any) => {
		let filterData = mainStore.appConfigInfo.APPModules.filter((item : any) => item.ModuleName == menu.APPTypeName);
		permissionStore.moduleInfoAll = [];
		permissionStore.moduleTabbar = [];
		permissionStore.activeModule = filterData[0];

		inventoryStore.Menu = menu;
		// 页面跳转待配置
		let path = "";
		let urlArr = [] as any;
		// let path = uni.$utils.replaceDispatchPath(menu.AP_Link);
		// console.log(path);


		// uni.navigateTo({
		// 	url: path
		// });
		if (menu.AP_Link.includes('/ReportList/Table')) {

			// const params = parseQueryString(path);

			let port = mainStore.appConfigInfo.serverIP.split(':')[1];

			path = mainStore.appConfigInfo.ICPServerIP + '/AppTable.html?moduleName=' + menu.Para + '&port=' + port + '&win_size=win_medium';


			uni.$utils.navigateToWebView({
				url: path,
				title: menu.APFunName,
				navBgColor: '#51d0d0',
				navTextColor: '#ffffff'
			});
		}
		// 判断是否跳转到配置表单
		else if (menu.AP_Link.includes('/Form/Detail')) {
			const params = parseQueryString(path);
			// 构造表单参数对象
			inventoryStore.MenuDetail = {
				detailTitle: params.objName,
				detailName: params.objName,
				keyName: params.keyName,
				keyValue: params.keyValue,
				dataInfo: {
					titleColName: '',
					showColumnsInfo: [],
					tagColumnsInfo: [],
				}
			};

			// 处理表单类对象的权限配置
			if (params.objName && params.objName.endsWith("表单")) {
				permissionStore.getUnPermissionConfigInfo(params.objName.slice(0, -2));
				uni.navigateTo({
					url: '/commonPage/Form/Edit'
				});
			}

		}
		// 判断是否跳转到配置列表
		else if (menu.AP_Link.includes('/Form/List')) {
			console.log(menu);
			inventoryStore.Menu = {
				APFunName: menu.APFunName,
				Para: menu.Para
			};
			uni.navigateTo({
				url: menu.AP_Link
			})
		}
		else {

			path = urlArr[0] + '?APFunName=' + menu.APFunName;
			if (urlArr.length > 1) {
				path = path + '&' + urlArr[1];
			}
			console.log(uni.$utils.replaceDispatchPath(menu.AP_Link));
			// 处理部分url地址映射
			uni.navigateTo({
				url: uni.$utils.replaceDispatchPath(menu.AP_Link)
			})
		};

	};
	const onSwiperChange = (e : any) => {
		swiperIndex.value = e.detail.current;
	}
	// 显示快捷菜单设置
	const showPopUp = () => {
		let data = {
			currModuleID: currModuleID,
			currBoardID: currBoardID,
			currModule: module.value,
			currShortcut: shortcuts.value
		};

		mainStore.BaseScreenParm = data;

		uni.navigateTo({
			url: '/commonPage/kanban/shortcutSetting/shortcutSetting',
			events: {
				refreshShortcut() {

					initShortcut();
				}
			}
		})

	}



	let pageConfig = reactive<any>({
		FCJType: null,

		singleTimes: [new Date(), new Date()],
		PickerIndex: 1,
		EndDate: Date.now(),

		SearchCheckList: [
			{ text: '全部', value: 2 },
			{ text: '未审核', value: 0 },
			{ text: '已审核', value: 1 },
		],
		CheckedSearchData: { text: '全部', value: 2 },

		currentID: -1,
	});

	pageConfig.FCJType = ticketStore.FCJType;

	// 菜单下拉选
	const onChoiceCell = (data) => {
		Object.assign(pageConfig.CheckedSearchData, data);

		getTopNumsData();
	}

	// 切换时间
	const onChangeDate = () => {
		pageConfig.PickerIndex = 1;

		getTopNumsData();
	}




	// 顶部统计模块数据
	let ModleList = ref<any>([
		{ Icon: uni.$utils.getResourceUrl("assets/image/icon/Total.png"), ShowText: '0', Text: '报工总数', id: 1 },
		{ Icon: uni.$utils.getResourceUrl("assets/image/icon/FinishNum.png"), ShowText: '0', Text: '合格总数', id: 2 },
		{ Icon: uni.$utils.getResourceUrl("assets/image/icon/percentage.png"), ShowText: '1', Text: '合格率', id: 3 },
		{ Icon: uni.$utils.getResourceUrl("assets/image/icon/WorkNum.png"), ShowText: '0.00%', Text: '报工单数', id: 4 },
	]);
	// 打开实时看板弹层
	const openPermissionDialog = () => {

	}

	// 播报列表
	let RollList = ref<any>([]);
	let BroadcastPopup = ref(false);
	// 打开实时看板弹层
	const openBroadcastPopup = () => {
		BroadcastPopup.value = true;
	}
	// 关闭实时看板弹层
	const closeBroadcastPopup = () => {
		BroadcastPopup.value = false;
	}

	// 完成数量统计
	let FisishData = ref<any>([]);

	// 员工报工排行
	let rankingData = ref<any>([])

	const dateFormat = (val, Type = 'yyyy-MM-dd') => { // 格式化时间
		if (!uni.$utils.isEmpty(val)) {
			return uni.$utils.dateFormat(new Date(val), Type);
		} else {
			return uni.$utils.dateFormat(new Date(), Type);
		}
	}

	// 获取数据
	const getTopNumsData = () => {
		uni.$utils.showLoading();

		try {
			console.log({
				Approve: pageConfig.CheckedSearchData.value,
				FCJType: pageConfig.FCJType,
				FSDate: dateFormat(pageConfig.singleTimes[0]),
				FEDate: dateFormat(pageConfig.singleTimes[1]),
			});
			request({
				config: {
				},
				url: 'XGD_BulletinBoard',
				method: 'POST',
				data: {
					Approve: pageConfig.CheckedSearchData.value,
					FCJType: pageConfig.FCJType,
					FSDate: dateFormat(pageConfig.singleTimes[0]),
					FEDate: dateFormat(pageConfig.singleTimes[1]),
				},
				success: async (ret : any) => {
					console.log(ret);
					uni.$utils.hideLoading();

					if (ret.status == 200) {


						const ds0 = ret.data.ds[0];
						const list = ModleList.value;

						// 顶部看板数据
						list[0].ShowText = ds0.FSumQty;
						list[1].ShowText = ds0.FDailyQtt;
						list[2].ShowText = `${Number(ds0.OKRate).toFixed(2)}%`;
						list[3].ShowText = ds0.BGDNum;

						// 播报信息
						RollList.value = ret.data.ds1.map(item => {
							return {
								...item,
								title: item['EmplName'] + ' ' + item['ProcedureName'],
								time: dateFormat(item.BillDate, 'yyyy-MM-dd hh:mm:ss'),
								Date: dateFormat(item.BillDate, 'yyyy-MM-dd hh:mm:ss'),
							}
						});
						console.log(RollList.value);

						FisishData.value = ret.data.ds2.slice(0, 5);

						// 工序执行进度
						await getServerData(ret.data.ds3);

						// 员工报工排行
						// 按FSumQty排序
						ret.data.ds4.sort((a, b) => parseFloat(b.FSumQty) - parseFloat(a.FSumQty));
						rankingData.value = ret.data.ds4.slice(0, 5);

					}

				},
				fail(err : any) {
					uni.$utils.hideLoading();
					console.log(err);
				}
			});
		} catch (error) {
			//TODO handle the exception
			uni.$utils.hideLoading();
		}

	}

	const FormateBackFun = (str, data) => {
		if (str == 'rank') { // 员工排行
			let IconUrl = '';
			switch (data) {
				case 0:
					IconUrl = 'assets/image/icon/first.png';
					break;
				case 1:
					IconUrl = 'assets/image/icon/second.png';
					break;
				case 2:
					IconUrl = 'assets/image/icon/third.png';
					break;
				default:
					break;
			};
			return uni.$utils.getResourceUrl(IconUrl);
		}
	};

	// 工序执行进度统计图
	let chartData = ref<any>({});

	let opts = {
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
			"#ea7ccc"
		],
		padding: [15, 15, 0, 15],
		enableScroll: true,
		legend: {},
		// xAxis: {
		// 	disableGrid: true,
		// 	title: "单位：年"
		// },
		xAxis: {
			disableGrid: true,
			// calibration: true,
			scrollShow: true,
			itemCount: 2,
			labelCount: 12,
			lineHeight: 40,
			// min: 0,
		},
		yAxis: {
			// disabled: false,
			// disableGrid: false,
			// splitNumber: 5,
			gridType: "dash",
			dashLength: 4,
			gridColor: "#CCCCCC",
			padding: 10,
			showTitle: false,
			data: [{
				calibration: true,
				// position: "left",
				// title: " ",
				min: 0,
			}]
		},
		extra: {
			mix: {
				column: {
					width: 20
				}
			}
		}
	};

	const getServerData = async (data : any) => {
		let _categories = [],
			_FPlanQty = [],
			_FDailyQtt = [],
			_FNgQty = [];

		await data.forEach(item => {
			_categories.push(item.ProcedureName)
			_FPlanQty.push(item.FPlanQty)
			_FDailyQtt.push(item.FDailyQtt)
			_FNgQty.push(item.FNgQty)
		});


		chartData.value = {
			categories: _categories,
			series: [
				{ name: "计划数", type: "column", color: "#5470c6", data: _FPlanQty },
				{ name: "良品数", type: "column", color: "#2fc25b", data: _FDailyQtt },
				{ name: "不良品数", type: "column", color: "#ff6d33", data: _FNgQty },
			]
		};



	}


	onLoad((option : any) => {
		pageConfig.currentID = +option.TabbarID;

		setTimeout(() => {
			initShortcut();
			getTopNumsData();
		}, 300)

	})
</script>

<style lang="scss">
	$h-padding: 5px;
	$v-padding: 10px;
	$radius: 5px;

	.page__content {
		// height: 100vh;
		background-color: #f9f9f9;

		.commonBox {
			display: flex;
			flex-direction: column;
			padding: $v-padding $h-padding;
			background-color: #ffffff;
			margin-bottom: $v-padding;
			border-radius: $radius;

			&-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 $h-padding $v-padding $h-padding;

				&-left {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					width: 150rpx;
					font-size: 14px;
					font-weight: 500;
				}

				&-right {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					width: 100rpx;
				}
			}

			&-content {
				display: flex;
				flex-direction: column;

				// 快捷菜单宫格
				.grid-text {
					font-size: 12px;
					color: #909399;
					padding: 5px 0 10px 0;
					box-sizing: border-box;
				}

				// 待办/实时数据横向滚动
				.scrollWrap {
					display: flex;
					flex-direction: column;
					flex-wrap: wrap;
					align-content: flex-start;
					max-height: 180px;
					overflow-y: hidden;
					overflow-x: auto;

					&-item {
						width: 35vw;
						height: 80px;
						display: flex;
						flex-direction: column;
						background: linear-gradient(to bottom right, #F6F6F6, #FFFFFF);
						border-radius: 5px;
						justify-content: center;
						align-items: center;

						.todoBot {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							width: 100%;
							padding: 5px 10px;
							color: #909399;
							font-size: 14px;
						}



						// 实时数据
						.rtTop {
							display: flex;
							justify-content: center;
							align-items: center;
							padding: 10px 0;
							font-size: 18px;
							font-weight: 500;

							&-left {
								display: flex;
								justify-content: center;
								align-items: center;
								color: rgba(108, 148, 255, 1);
								background: rgba(108, 148, 255, .11);
								width: 36px;
								height: 36px;
								line-height: 36px;
								border-radius: 18px;
							}

							&-right {
								margin-left: 20px;
							}
						}

						.rtBot {
							display: flex;
							justify-content: space-between;
							font-size: 14px;
							color: #909399;

							&-right {
								margin-left: 10px;
							}
						}
					}
				}

				// 图表
				.charts-box {
					width: 100%;
					height: 300px;
				}
			}
		}




		.example-body {
			width: 100%;
			padding: 6px 20px;
			color: #333;
			background-color: #fff;
			border-radius: 15rpx;
			// color: #fff;
			// background-color: #51d0d0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;

			.MenuText {
				font-size: 24rpx;
				border-right: 1px solid #999;
				padding-right: 20rpx;
				// margin-right: 8rpx;
				// background-color: #fff;
				height: 100%;
			}

			.uni-date {
				background-color: #fff;

				.uni-date-editor--x {
					background-color: #fff !important;
				}

				.uni-date__icon-clear {
					background-color: #fff !important;
				}
			}

			.BtnBox {
				margin-left: 8rpx;
			}

		}



		&__main {
			padding: 20rpx;

			.ItemCard {
				width: 22%;
				border-radius: 12px;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 40rpx 0;
			}

			.CommonCardBox {
				padding: 20rpx;
				min-height: 200px;
				background-color: #fff;
				border-radius: 12px;
				margin-top: 24rpx;


				.CommonCard_TitleLeftIcon {
					padding: 8rpx;
					border-radius: 18rpx;
				}

				.FinishIconBac {
					background-color: rgba(132, 222, 13, .1);
				}

				.GXIconBac {
					background-color: rgba(165, 111, 233, .1);
				}

				.YGBGPHIconBack {
					background-color: rgba(244, 234, 42, .1);
				}

				.BLPFBIconBack {
					background-color: rgba(255, 111, 111, .1);
				}


				.CommonCard_RightBox {

					.Text {
						color: #51d0d0;
						margin-right: 6rpx;
						font-size: 24rpx;
					}

					.u-icon {
						font-weight: 600;
					}
				}

				.CommonCard_Main {
					padding-bottom: 20rpx;

					.charts-box {
						width: 100%;
						height: 300px;
					}

					.LineBox {
						padding: 20rpx 30rpx;

						.TextBox {
							justify-content: space-between;
							font-size: 28rpx;
							margin-bottom: 24rpx;
						}

						.Line_Left {
							color: #757575;
							white-space: nowrap;
							/* 防止文本换行 */
							overflow: hidden;
							/* 隐藏超出部分 */
							text-overflow: ellipsis;
							/* 显示省略号 */
						}

						.Line_Right {
							min-width: 64rpx;
							text-align: right;
						}
					}
				}
			}
		}
	}
</style>